<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    canvas {
      display: inline-block;
      /* width: 100%;
      height: 100%; */
      width: 400px;
      height: 400px;
      /* position: absolute;
      left: 100px;
      top: 100px; */
    }
  </style>
  <script src="../dist/ddd.js"></script>
  <img hidden id="ss" src="texture.png" alt="">
  <img hidden id="ss1" src="assets/back.jpg" alt="">
  <img hidden id="ss2" src="assets/bottom.jpg" alt="">
  <img hidden id="ss3" src="assets/front.jpg" alt="">
  <img hidden id="ss4" src="assets/left.jpg" alt="">
  <img hidden id="ss5" src="assets/top.jpg" alt="">
</head>

<body>
  <canvas id="my_Canvas"></canvas>
  <script>
    /*============= Creating a canvas =================*/
    var mycanvas = document.getElementById('my_Canvas');
    var client = new DDD.UICanvas(mycanvas)

    var center = new DDD.UIObject(1, 1, .1, .1, "_cener_");
    var obj = new DDD.UIObject(0.5, 0.5, .2, .5, "_obj");
    var obj2 = new DDD.UIObject(0.8, 0.8, .5, .5, "obj2");



    obj.add(obj2)
    center.add(obj);

    var camera = new DDD.UICamera();
    // var camera = new DDD.PerspectiveCamera(35, 1, 1, 1000);
    // var camera = new DDD.OrthographicCamera(2, 2, 0.1, 1000);

    var render = new DDD.UIRender(client, camera);
    var material = new DDD.UIMaterial({
      color: [1, 1, 0, 1]
    });

    center._material = new DDD.UIMaterial({
      color: [1, 0, 0, 1]
    });
    obj._material = new DDD.UIMaterial({
      color: [1, 1, 0, 1]
    });
    obj2._material = new DDD.UITextureMaterial({
      u_Sampler: ss,
      textureCoord: new Float32Array([
        0.0, 1.0, 1.0, 1.0, 1.0, 0.0, 0.0, 0.0,
      ])
    });

    var box = new DDD.UIObject(1.5, 1.5, .5, .5, "box");
    box._vertices = new Float32Array([
      -0.25, -0.25, 0.25, 0.25, -0.25, 0.25, 0.25, 0.25, 0.25, -0.25, 0.25, 0.25, -0.25, -0.25, -0.25, -0.25, 0.25,
      -0.25, 0.25, 0.25, -0.25, 0.25, -0.25, -0.25, -0.25, 0.25, -0.25, -0.25, 0.25, 0.25, 0.25, 0.25,
      0.25, 0.25, 0.25, -0.25, -0.25, -0.25, -0.25, 0.25, -0.25, -0.25, 0.25, -0.25, 0.25, -0.25, -0.25, 0.25, 0.25,
      -0.25, -0.25, 0.25, 0.25, -0.25, 0.25, 0.25, 0.25, 0.25, -0.25, 0.25, -0.25, -0.25, -0.25,
      -0.25, -0.25, 0.25, -0.25, 0.25, 0.25, -0.25, 0.25, -0.25
    ])

    box._indices = new Uint16Array([
      0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11, 12, 13, 14, 12, 14, 15, 16, 17, 18, 16, 18, 19, 20,
      21, 22, 20, 22, 23
    ])

    box._material = new DDD.UITextureMaterial({
      u_Sampler: ss, //[ss, ss, ss, ss, ss, ss],
      textureCoord: new Float32Array([
        0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 1.0,
        1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 0.0, 0.0, 1.0,
        0.0, 1.0, 1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0
      ])
    });

    render.addRenderObject(box);



    render.addRenderObject(obj);

    var animation = new DDD.Animation(true)
    animation._duration = 2000;
    animation._repeatCount = 4;
    animation._startOffset = 1000;
    animation._repeatMode = 'reverse'
    // animation._fillBefore = false;
    // animation._fillAfter = true;
    animation.applyTransformation = (interpolatedTime) => {
      // console.log('...', interpolatedTime * 2 - 1, interpolatedTime * 2 - 1)
      obj.setPosition(interpolatedTime * 2 - 1, interpolatedTime * 2 - 1, 0)
    }

    animation.registerAnimationStartListener((ani) => {
      // console.log('start...')
    })

    animation.registerAnimationEndListener((ani) => {
      console.log('end...', ani._oneMoreTime, ani._started, ani._ended, ani._more)
    })

    animation.registerAnimationRepeatListener((ani) => {
      // console.log('repeat...', ani._repeated)
    })

    animation.registerAnimationProgressListener((ani, progress) => {
      // console.log('animation', progress)
    })

    let ani = new DDD.ValueAnimation();
    ani.valueFrom = 2
    ani.valueTo = 52
    ani._duration = 2000;
    ani._startOffset = 2000;
    // ani._repeatCount = 200;
    ani._fillEnabled = true;
    ani._fillBefore = false;
    ani._fillAfter = false;
    ani.setInterpolator(new DDD.BounceInterpolator())
    ani.registerAnimationStartListener((ani) => {
      // console.log('start...')
    })
    ani.registerAnimationProgressListener((ani, progress) => {
      // console.log('value animation', progress)
      var pointer = new DDD.UIObject(0, 0, 0.05, 0.05, "__");
      pointer.setPosition(progress * 2 - 1.0, ani.getValue() * 2.0 / 52.0 - 1, 0)
    })

    var animate = function (time) {
      render.render();
      obj.rotateZ(-0.01)
      animation.updateAnimation();
      ani.updateAnimation();
      window.requestAnimationFrame(animate);
    }
    animate(0);

    let ray = new DDD.RayCaster(camera);

    mycanvas.addEventListener('webgl', (e) => {
      // console.log(e.webglX, e.webglY, e.webgldrag)
      if (e.webgldrag) {
        var pointer = new DDD.UIObject(0.5, 0.5, 0.1, 0.1, "__");
        pointer._modelMatrix.elements[12] = e.webglX;
        pointer._modelMatrix.elements[13] = e.webglY;
        pointer._material = new DDD.UIMaterial({
          color: [0, 0, 1, 1]
        });
        render.addRenderObject(pointer);

        // console.log(e.webglX, e.webglY)
      }
    })
  </script>

</body>

</html>